<template>
	<view>
		<uni-section title="处理入口" type="line" padding>
			<uni-grid :column="3" :show-border="false" :square="false">
				<uni-grid-item>
					<uni-badge class="uni-badge-left-margin" :text="StateData2.length" absolute="rightTop" :offset="[21, 0]" size="small">
						<!-- <view class="box"><text class="box-text">右上</text></view> -->
					</uni-badge>
					<view class="grid-item-box" @click="Whandle">
						<uni-icons type="calendar-filled" size="30"></uni-icons>
						<text class="text">待处理</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<uni-badge class="uni-badge-left-margin" :text="StateData3.length" absolute="rightTop" :offset="[21, 0]" size="small">
						<!-- <view class="box"><text class="box-text">右上</text></view> -->
					</uni-badge>
					<view class="grid-item-box" @click="handling">
						<uni-icons type="notification" size="30"></uni-icons>
						<text class="text">处理中</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<uni-badge class="uni-badge-left-margin" :text="StateData1.length" absolute="rightTop" :offset="[21, 0]" size="small"></uni-badge>
					<view class="grid-item-box" @click="WDistribution">
						<uni-icons type="person-filled" size="30"></uni-icons>
						<text class="text">已完结</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="快速处理" type="line">
			<uni-list>
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item
						v-for="(item, index) in CardData"
						:right-options="item.state == 2 ? options1 : item.state == 5 ? '' : options2"
						:key="item.id"
						@change="swipeChange($event, index)"
						@click="swipeClick($event, item)"
					>
						<uni-list-item
							:title="item.title"
							:note="item.createTime"
							link="navigateTo"
							to="/pages/work/WorkOeder/detail"
							showArrow
							clickable
							:rightText="item.worderClass.typeName"
							@click="ToDetail(item)"
						/>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
import { myWorktodo, updateState } from '@/api/system/user.js';
import store from '@/store/index.js';
export default {
	data() {
		return {
			cover: 'http://116.148.228.110:9000/Upload/covers/20240204/20240204_170721_7458_199%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240204170518.png',
			cardTitle: '待派发',
			Wstate: '2',
			UserId: '',
			Wdata: '', //总数据
			StateData1: [],
			StateData2: [],
			StateData3: [],
			CardData: '',
			options1: [
				{
					text: '接收',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '退回',
					style: {
						backgroundColor: '#F56C6C'
					}
				}
			],
			options2: [
				{
					text: '退回',
					style: {
						backgroundColor: '#F56C6C'
					}
				}
			]
			// OrderStatus: ''
		};
	},
	onLoad() {
		this.getmyWorktodo();
	},
	onShow() {
		this.getmyWorktodo();
	},
	methods: {
		getmyWorktodo() {
			try {
				this.UserId = uni.getStorageSync('userID');
				if (this.UserId) {
					console.log(this.UserId);
				}
			} catch (e) {
				// error
			}
			const that = this;
			myWorktodo('', that.UserId).then((res) => {
				that.StateData1 = [];
				that.StateData2 = [];
				that.StateData3 = [];
				// console.log(res.rows);
				that.Wdata = res.rows;
				that.Wdata.map((t) => {
					if (t.state == 5) {
						that.StateData1.push(t);
					}
					if (t.state == 2) {
						that.StateData2.push(t);
					}
					if (t.state == 3) {
						that.StateData3.push(t);
					}
				});
				that.CardData = that.StateData1;
				that.Wstate == 5 ? that.WDistribution() : that.Wstate == 2 ? that.Whandle() : that.handling();
			});
		},
		WDistribution() {
			this.cardTitle = '已完结';
			this.CardData = this.StateData1;
			// this.OrderStatus = 1
			this.Wstate = 5;
			// this.getmyWorktodo();
		},
		Whandle() {
			this.cardTitle = '待处理';
			this.CardData = this.StateData2;
			this.Wstate = 2;
			// this.getmyWorktodo();
		},
		handling() {
			this.cardTitle = '处理中';
			this.CardData = this.StateData3;
			this.Wstate = 3;
			// this.getmyWorktodo();
		},
		ChangeStatesBack(item) {
			uni.showLoading({
				title: '加载中'
			});

			let data = { id: item.id, serviceId: item.serviceId, state: item.state - 1 };
			console.log('data:', data);
			updateState(data).then((res) => {
				this.getmyWorktodo();
				// console.log('res:', res);
			});
			// console.log('data:', data);

			uni.hideLoading({});
		},
		ChangeStatesNext(item) {
			uni.showLoading({
				title: '加载中'
			});
			let data = { id: item.id, serviceId: item.serviceId, state: item.state + 1 };

			updateState(data).then((res) => {
				this.getmyWorktodo();
				// console.log('res:', res);
			});
			// console.log('item:', item);
			// console.log('that.Wstate:', this.Wstate);

			uni.hideLoading({});
		},
		swipeChange(e, index) {
			// console.log('返回：', e);
			// console.log('当前索引：', index);
		},
		swipeClick(e, item) {
			console.log(e);
			let { content } = e;
			if (content.text === '接收') {
				this.ChangeStatesNext(item);
			} else if (content.text === '退回') {
				this.ChangeStatesBack(item);
			}
		},
		ToDetail(b) {
			console.log('bbbb', b);
			// this.$tab.navigateTo('/pages/work/WorkTask/detail');
			store.state.CusImform = b;
			console.log('store.state.CusImform:', store.state.CusImform);
		}
	}
};
</script>

<style>
.grid-item-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.uni-grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
/* .uni-list {
	flex-direction: row !important;
	align-items: center;
	height: 50px;
} */
.btnOrder {
	height: 50%;
}
</style>
